<template>
  <el-card class="content">
    <el-row>
      <el-col :span="6">
        <span>监测体名称：</span>
        <el-input
          placeholder="请输入监测体名称"
          style="width: 200px"
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-button class="black-button">查询</el-button>
        <el-button type="primary" icon="el-icon-plus">新增</el-button>
      </el-col>
    </el-row>
    <p class="bg-purple">监测体信息列表</p>
    <el-table :data="table_data" stripe size="small">
      <el-table-column
        label="监测体名称"
        prop="monitoring_body_name"
      ></el-table-column>
      <el-table-column label="经度" prop="longitude"></el-table-column>
      <el-table-column label="纬度" prop="latitude"></el-table-column>
      <el-table-column label="地图缩放级别" prop="level"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button type="text" size="small">修改</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <!-- <el-col :span="10"> -->
      <el-pagination background layout="prev, pager, next, jumper" :total="8">
      </el-pagination>
      <!-- </el-col> -->
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "MonitoringBodyManagementChild",
  data() {
    return {
      table_data: [
        {
          monitoring_body_name: "溧水地灾监测点",
          longitude: "119.16729316",
          latitude: "31.68611591",
          level: "16",
          create_time: "2019-08-06 08:38:26",
        },
      ],
    };
  },
};
</script>

<style scoped>
.content {
  height: 87vh;
}

.black-button {
  background-color: black;
  color: white;
}

.bg-purple {
  background: #d3dce6;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  padding-left: 10px;
}
.el-button {
  font-size: 14px;
}
.el-table::before {
  z-index: inherit;
}
</style>
